<template>
    <view v-if="isShow" class="popup-overlay" @click="handleClick">
        <view :class="{ 'shrink-animation': isClicked, 'scale-animation': isShow }" class="box-wared">
            <image style="width: 340rpx;margin-top: 52rpx" mode="widthFix" :src="showImageUrl"></image>
            <image style="width: 394rpx;margin-top: 98rpx" class="topImage" mode="widthFix" :src="topImage"></image>
            <view class="err-title" style="color: #FE7A1B;">10元探店红包</view>
            <view class="err-text">{{showText}}</view>
            <view class="err-btn" @click.stop="getClick">立即领取</view>
        </view>
        <view v-if="isShow & !isClicked" class="delet-icon-error">
          <u-icon name="close-circle" color="#FFFFFF" size="50"></u-icon>
            <!--<image src="http://yyadmin.laimeitong.com/images/delet.png"></image>-->
        </view>
    </view>
</template>
<script>
const app = getApp();
import newUserRewardApi from '@/api/newUserReward.js'
export default {
    data() {
        return {
            isClicked: false,
            isShow: false,
            BestImgUrl: app.globalData.imgurl,
            compInfo: {},
            topImage: `${app.globalData.imgurl}/Group_34027@2x.png`,
        }
    },
    props: {
        showText: {
            type: String,
            default: '领取失败'
        }
    },
    computed: {
        showImageUrl() {
            return `${this.BestImgUrl}/image_389@2x.png` 
        }
    },
    methods: {
        showUp() {
            this.isShow = true;
        },
        // 领取奖励
        getClick() {
            this.isClicked = true;

            // 可选：动画结束后移除元素
            setTimeout(() => {
                // this.$destroy() // 根据实际需求决定是否要销毁组件
                this.isShow = false;
                this.isClicked = false
                this.$emit('getClick', 3)
            }, 1000)
        },
        handleClick() {
            this.isClicked = true;

            // 可选：动画结束后移除元素
            setTimeout(() => {
                // this.$destroy() // 根据实际需求决定是否要销毁组件
                this.isShow = false;
                this.isClicked = false
            }, 1000)
        }
    }
}
</script>
<style>
/* @import "./css/index-xg.css"; */
@import "./css/animation-err.css";
.box-wared{
    box-shadow: inset 0rpx 0rpx 16rpx 0rpx rgba(0,0,0,0.25);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 12rpx solid #fdda63;
    /* border-image: linear-gradient(180deg, rgba(255, 220, 97, 1), rgba(245, 210, 103, 1), rgba(255, 240, 193, 1), rgba(247, 215, 113, 1)) 12 12; */
}
.topImage{
    position: absolute;
    top: -25%;
    left: 50%;
    transform: translateX(-50%);
}
</style>